<script setup></script>
<template>
  <footer class="footer py-5">
    <div class="container z-index-1 position-relative">
      <div class="row">
        <div class="col-lg-4 me-auto mb-lg-0 mb-4 text-lg-start text-center">
          <h6 class="text-dark font-weight-bolder text-uppercase mb-lg-4 mb-3">
            Material Design
          </h6>
          <ul
            class="nav flex-row ms-n3 justify-content-lg-start justify-content-center mb-4 mt-sm-0"
          >
            <li class="nav-item">
              <a
                class="nav-link text-dark opacity-8"
                href="https://www.creative-tim.com"
                target="_blank"
              >
                Home
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link text-dark opacity-8"
                href="https://www.creative-tim.com/presentation"
                target="_blank"
              >
                About
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link text-dark opacity-8"
                href="https://www.creative-tim.com/blog"
                target="_blank"
              >
                Blog
              </a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link text-dark opacity-8"
                href="https://www.creative-tim.com"
                target="_blank"
              >
                Services
              </a>
            </li>
          </ul>
          <p class="text-sm text-dark opacity-8 mb-0">
            Copyright © {{ new Date().getFullYear() }} Material Design by
            Creative Tim.
          </p>
        </div>
        <div class="col-lg-6 ms-auto text-lg-end text-center">
          <p class="mb-5 text-lg text-dark font-weight-bold">
            The reward for getting on the stage is fame. The price of fame is
            you can’t get off the stage.
          </p>
          <a
            href="javascript:;"
            target="_blank"
            class="text-dark me-xl-4 me-4 opacity-5"
          >
            <span class="fab fa-dribbble"></span>
          </a>
          <a
            href="javascript:;"
            target="_blank"
            class="text-dark me-xl-4 me-4 opacity-5"
          >
            <span class="fab fa-twitter"></span>
          </a>
          <a
            href="javascript:;"
            target="_blank"
            class="text-dark me-xl-4 me-4 opacity-5"
          >
            <span class="fab fa-pinterest"></span>
          </a>
          <a href="javascript:;" target="_blank" class="text-dark opacity-5">
            <span class="fab fa-github"></span>
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>
